<template>
    <div class="map-wrapper">
        <!-- 地图容器 -->
        <div id="container" ref="container"></div>

        <!-- loading / error 提示 -->
        <div v-if="loading" class="mask">地图加载中…</div>
        <div v-if="error" class="mask error">{{ error }}</div>
    </div>
</template>

<script>
export default {
    name: 'BMapLayer',
    data() {
        return {
            map: null,
            distLayer: null,
            loading: true,
            error: null
        }
    },
    async mounted() {
        try {
            await this.loadScripts()
            this.initMap()
            this.addDistrictLayer()
        } catch (e) {
            this.error = e.message || '初始化失败'
        } finally {
            this.loading = false
        }
    },
    beforeDestroy() {
        this.map && this.map.destroy && this.map.destroy()
    },
    methods: {
        /* 1. 动态加载百度 API 及行政区划数据 */
        loadScripts() {
            return Promise.all([
                this.loadScript(
                    'http://api.map.baidu.com/api?type=webgl&v=1.0&ak=FvibPOTtrtCn6z91J0SNPHBQe8NdfICU'
                ),
                this.loadScript(
                    'http://bj.bcebos.com/v1/mapopen/api-demos/data/province.js'
                )
            ])
        },

        loadScript(src) {
            return new Promise((resolve, reject) => {
                if (document.querySelector(`script[src="${src}"]`)) {
                    resolve()
                    return
                }
                const script = document.createElement('script')
                script.type = 'text/javascript'
                script.src = src
                script.onload = () => resolve()
                script.onerror = () => reject(new Error(`${src} 加载失败`))
                document.head.appendChild(script)
            })
        },

        /* 2. 初始化地图 */
        initMap() {
            this.map = new BMapGL.Map(this.$refs.container)
            this.map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 7)
            this.map.enableScrollWheelZoom()
            this.map.addControl(new BMapGL.NavigationControl3D())
            this.map.addControl(new BMapGL.ZoomControl())
            this.map.enableScrollWheelZoom(true)
        },

        /* 3. 添加行政区划图层并绑定事件 */
        addDistrictLayer() {
            this.distLayer = new BMapGL.DistrictLayer({
                name: '(南昌市)',
                kind: 1,
                fillColor: '#618bf8',
                fillOpacity: 1,
                strokeColor: '#daeafa',
                viewport: true
            })
            this.map.addDistrictLayer(this.distLayer)

            // 鼠标事件
            this.distLayer.addEventListener('click', e => {
                console.log(e);
            })
            this.distLayer.addEventListener('mouseover', e => {
                e.currentTarget.setFillColor('#9169db')
            })
            this.distLayer.addEventListener('mouseout', e => {
                e.currentTarget.setFillColor(e.currentTarget.style.fillColor)
            })
        }
    }
}
</script>

<style scoped>
.map-wrapper {
    position: relative;
    font-family: '微软雅黑';
    width: 100%;
    height: 500px;
}

#container {
    width: 100%;
    height: 500px;
}

.mask {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 4px;
}

.mask.error {
    background: rgba(255, 0, 0, 0.6);
}
</style>

